<template>
  <div class="page">
    <global-header :title="title" @back="$router.back()">
      <template #right>
        <div class="mr-[10px]">
          <RangeDatePopup v-model:date="searchParams.date" />
        </div>
      </template>
    </global-header>
    <main class="page-main !overflow-hidden page">
      <SearchArea :show-menu="false" :show-issue="false" @search="handleSearch" />
      <div class="bg-white mt-[10px]">
        <div
          class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px] px-[15px]"
          style="border-bottom: 1px solid #e4e4e4"
        >
          <div class="w-[20%] text-center">备注</div>
          <div class="w-[25%] text-center">用户名</div>
          <div class="w-[22.5%] text-center">余额</div>
          <div class="w-[22.5%] text-center">下注金额</div>
          <div class="w-[10%] text-center">操作</div>
        </div>
      </div>
      <div class="page-main" ref="scrollRef">
        <div class="bg-white">
          <scroll-list
            v-model:loading="state.loading"
            v-model:refresh="state.refresh"
            :finished="state.finished"
            :length="list.length"
            @load="load"
          >
            <template v-for="item in list">
              <BackwaterItem :item="item" :isBack="isBack" />
            </template>
          </scroll-list>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup lang="ts">
import BackwaterItem from "./backwater-item.vue";
import SearchArea from "../search-area.vue";

const props = withDefaults(
  defineProps<{
    isBack?: "0" | "1";
    title?: string;
  }>(),
  {
    isBack: "1",
    title: "回水报表"
  }
);

import moment from "moment";
import { reqReportRebate } from "@/api/report";
import { useList } from "@/hooks/useList";

interface Params {
  Name?: string;
  Status?: string;
  StartDate?: string;
  EndDate?: string;
  LotteryId?: string | number;
  IsBack?: "0" | "1";
}

const searchParams = reactive({
  Name: "",
  Type: "1",
  LotteryId: -1,
  date: <Date[]>[moment().toDate(), moment().toDate()]
});

provide("searchParams", searchParams);

const getParams = () => {
  const params: Params = {
    IsBack: props.isBack
  };
  if (searchParams.Name) {
    params.Name = searchParams.Name;
  }
  if (searchParams.date) {
    params.StartDate = moment(searchParams.date[0]).format("YYYY-MM-DD 00:00:00");
    params.EndDate = moment(searchParams.date[1]).format("YYYY-MM-DD 23:59:59");
  }
  return params;
};

// 获取列表
const { scrollRef, state, list, getData, search, load } = useList<ReportRebateMo, Params>(
  reqReportRebate,
  getParams
);

const handleSearch = () => {
  search();
};

watch(
  () => searchParams.date,
  () => {
    nextTick(handleSearch);
  }
);

onMounted(() => {
  getData();
});
</script>
